import { defineComponent, ref } from 'vue'

export default defineComponent({
    props: {},
    setup(props, { slots }) {
        let title = ref('')
        const todoList = ref([{title: '学习vue3', done: true}, {title: 'TS', done: false}])
        return () => <div class="todo-jsx-container">
            <h4>使用JSX渲染 TodoList</h4>
            <input type='text' vModel={title.value}></input>
            <div class="todo-item" >
                {todoList.value.map(item => {
                    return <div>
                        <input type="checkbox" vModel={item.done}></input>
                        <span class="title" className={'done'}>{item.title}</span>
                    </div>
                })}
            </div>
        </div>
    }
})